import { useRequest } from 'alova/client'
import { VChart } from '@visactor/react-vchart'
import { useState, useEffect, useRef } from 'react'

import { Http } from '../Utils/Api'
import { AdminRouter } from '../Config/default'
import { ChartsConfig } from '../Config/ChartsConfig'
import { getNestedValue, strOfurlParamsFunc, setVChartsFields } from '../Utils'

const defaultData = [
    { xField: 'Nail', seriesField: 'China', yField: 3054 },
    { xField: 'Nail', seriesField: 'USA', yField: 12814 },
    { xField: 'Eyebrow ', seriesField: 'China', yField: 5067 },
    { xField: 'Eyebrow ', seriesField: 'USA', yField: 13012 },
    { xField: 'Rouge', seriesField: 'China', yField: 7004 },
    { xField: 'Rouge', seriesField: 'USA', yField: 11624 },
    { xField: 'Lipstick', seriesField: 'China', yField: 9054 },
    { xField: 'Lipstick', seriesField: 'USA', yField: 8814 },
]

const TempChartsA02 = ({ config, apiData }) => {
    const chartRef = useRef()
    const { send } = useRequest(data => Http(data), { immediate: false })
    const [Spec, setSpec] = useState()

    const setSpecFunc = (data, color) => {
        const { axes_setUp, legends_setUp, mark_line, mark_point, scroll_Bar, type, stack, percent, direction, group,
            background, padding, barWidth, barGapInGroup, ...item } = config || AdminRouter.Chart02
        const { xField, yField } = setVChartsFields(direction, group)
        const axes = ChartsConfig.setAxes(axes_setUp)
        const title = ChartsConfig.setTitle(item)
        const legends = ChartsConfig.setLegends(legends_setUp)
        const label = ChartsConfig.setLabel(item)
        const tooltip = ChartsConfig.setTooltip(item)
        const crosshair = ChartsConfig.setCrosshair(item)
        const totalLabel = ChartsConfig.setTotalLabel(item)
        const markLine = ChartsConfig.setMarkLine(mark_line)
        const markPoint = ChartsConfig.setMarkPoint(mark_point)
        const scrollBar = ChartsConfig.setScrollBar(scroll_Bar)
        const bar = ChartsConfig.setBar(item)
        const barBackground = ChartsConfig.setBarBackground(item)

        setSpec({
            type,
            data: { values: data || defaultData },
            color: data ? color || data.map(item => item.color || '#13c2c2') : ChartsConfig.DefaultColor,
            stack,
            percent,
            background,
            padding,
            barWidth,
            barGapInGroup,
            direction,
            xField,
            yField,
            seriesField: 'seriesField',

            axes,
            title,
            legends,
            label,
            tooltip,
            crosshair,
            totalLabel,
            markLine,
            markPoint,
            scrollBar,

            bar,
            barBackground
        })
    }
    useEffect(() => {
        if (apiData?.length !== 0 && config?.list_apiName) {
            if (apiData?.length !== 0 && config?.list_apiName) {
                const { list_apiName, list_dataLevel, list_dataType, arr_data } = config
                const [urlList] = apiData.filter(v => v.name === list_apiName)
                const data = getNestedValue(list_dataLevel, urlList)
                if (list_dataType === 'array') {
                    const arr = data.flatMap(item =>
                        arr_data.map(key => ({
                            uuid: item.uuid,
                            seriesField: key.group,
                            xField: item[key.title],
                            yField: item[key.field],
                            color: key.color
                        }))
                    )
                    setSpecFunc(arr)
                    return
                }
                if (list_dataType === 'object') {
                    const { obj_group, obj_title, obj_field, obj_color } = config
                    const obj = data.map(item => {
                        return ({
                            uuid: item.uuid,
                            seriesField: item[obj_group],
                            xField: item[obj_title],
                            yField: item[obj_field],
                        })
                    })
                    const color = obj_color?.map(item => item.color)
                    setSpecFunc(obj, color)
                    return
                }
                setSpecFunc()
            } else setSpecFunc()
        } else setSpecFunc()
    }, [config, apiData])

    const optionsData = { disableDirtyBounds: true, options3d: { enable: true, enableView3dTransform: true, center: { x: 500, y: 250 } } }
    if (Spec) return <VChart className='ChartsClass' ref={chartRef} spec={Spec} options={optionsData} />
};

export default TempChartsA02